<template>
  <div class="bg-white" style="height: calc(100% - 10px)">
    <VTable ref="tableRef" v-bind="tableOptions" class="m-table">
      <template #GoodsSlot="{ row }">
        <ExpandList :show-expand="row?.products?.length > 1" :expand="row.expandStatus" @change="rendererView" :length="row?.products?.length">
          <template #default="{ expand }">
            <div class="product-item" v-for="(item, index) in getRows(row, expand)" :key="`${item.sku}${index}`">
              <div class="border-[#e6e7e9] border-[1px] rounded-[4px] p-[7px] text-[14px] text-[#3A4259] relative leading-[22px] w-[378px]">
                <div class="flex items-center">
                  <span class="text-[#3487ff] text-[14px]">{{ item.sku }}</span>
                  <el-divider direction="vertical" />
                  <VText title="自定义SKU" :value="item.custom_sku" :line="1" class="w-[120px]" />
                </div>
                <div>
                  <VText :value="item.sku_cn_title" :line="1" />
                  <VText title="退货数量" :value="item.quantity" :line="1" />
                </div>

                <div class="text-red">
                  <VText title="退货原因" :value="item.problem_type_desc" :line="1" />
                </div>
                <div class="absolute right-[0] top-[0]">
                  <span class="leading-[17px]"> {{ row.original_order_currency }} {{ item.original_price }} </span>
                  <span class="bg-[#EBECEE] text-[#FF0000] rounded-bl-[4px] px-[4px] ml-[4px]"> *{{ item.quantity }} </span>
                </div>
              </div>
            </div>
          </template>
        </ExpandList>
      </template>
      <template #empty>
        <img src="~@/assets/images/table-empty.png" alt="" class="h-[160px] w-[260px] m-auto" />
      </template>
    </VTable>
    <!-- 日志 -->
    <Log dialog v-model="logVisible" :autoLoad="false" tag="exchange" :business_id="logId" />
    <!-- 详情 -->
    <AddReturn v-model="addVisible" :id="returnId" @close="handleClose" :disabled="returnDisabled" @refresh="handleRefresh" />
  </div>
</template>

<script setup lang="jsx">
import Log from "@/components/Log/index.vue"
import { getExchangeList } from "../api/index"
import AddReturn from "@/views/user/return/components/AddReturn/index.vue"

import { userAuthList } from "@/Auth/user.js"
import { isPermission } from "@/hooks/permission.js"

import ExpandList from "@/components/ExpandList/index.vue"

const props = defineProps({
  params: { type: Object, default: () => ({}) },
  orderSn: { type: String, default: "" },
})

const emit = defineEmits(["refresh"])

const tableRef = ref()
const returnId = ref("")
const returnDisabled = ref(false)
const addVisible = ref(false)
const logVisible = ref(false)
const logId = ref("")

const getRows = (rows, expand) => {
  rows.expandStatus = expand
  const { products = [] } = rows || {}
  if (expand) return products
  if (!products?.length) return []
  if (products.length > 0 && products.length < 1) {
    return products
  }
  if (!expand) {
    return products?.slice(0, 1)
  }
}

const rendererView = (e) => {}

const rowStyle = ({ row, column }) => {
  return { height: `${row.expandStatus ? row.products.length * 112 : 132}px` }
}
const tableOptions = reactive({
  cellStyle: rowStyle,
  showOverflow: true,
  columns: [
    {
      title: "操作",
      width: 70,
      params: "right",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {isPermission([userAuthList.return.details]) && (
                <el-button link type="primary" onClick={() => handleDetail(row)}>
                  详情
                </el-button>
              )}
               <br />
              {isPermission([userAuthList.return.log]) && (
                <el-button link type="primary" onClick={() => handleLog(row)}>
                  日志
                </el-button>
              )}
            </div>
          )
        },
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page }) => {
        let param = {
          ...page,
          order_sn: props.orderSn || undefined,
        }
        param.order_sn = param.order_sn ? param.order_sn.split("\n") : []
        return getTab(param)
      },
    },
  },
})
import { tablecColumns } from "@/views/user/return/config.jsx"
const getTab = async (param) => {
  let columns = tablecColumns.value.concat(tableOptions.columns)
  nextTick(() => {
    tableRef?.value?.$table.reloadColumn(columns)
  })
  let res = await getExchangeList(param)
  return res
}
// 日志
const handleLog = (item) => {
  logId.value = item.id
  logVisible.value = true
}
// 详情
const handleDetail = (item) => {
  returnDisabled.value = true
  returnId.value = item.id
  addVisible.value = true
}
const handleClose = () => {
  returnId.value = ""
  returnDisabled.value = false
}
const handleRefresh = () => {
  // tableRef?.value?.commitProxy("query")
  // emit("refresh")
}
defineExpose({ tableRef })
</script>

<style lang="scss" scoped>
.m-table {
  :deep(.vxe-cell) {
    max-height: 100% !important;
    overflow: visible !important;
  }
}
</style>
